<!DOCTYPE html>
<!--需要实现的功能：
	1.通用结构的修改
	2.输入校验validation
	3.保存按钮：
	->新增下的保存：将信息记录入数据库，修改下部table
	->修改下的保存：将数据库信息更新，修改下部table
	4."修改"地址action的js，“修改”点击后，将新增div隐藏，将修改div显示 
	5."删除"按钮action的js，点击后从table 删除
	6. 默认地址？？？，->表示当前地址为默认地址
 -->

<html>
  <head lang="en">
    <title>收货地址管理</title> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="css/reset.css"> 
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/address_management.css">
    
    <!-- 引入require.js，注意格式 --> 
   	<script src="js/require.js" defer async="true" data-main="js/address_management_main"></script>
   		
  </head>
  
<body>
	
	<!-- 头部栏 -->
    <header class="header_outbox">
		<div class="header_inbox">
	         <div class="loginbox">
	             <p>欢迎访问Husky机械配件商城</p>
	             <a href="index.html" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 访问官网 ]</a>
	             <span id="register-info"> 
	                 <a href="login.html" class="login">&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;|</a>
	                 <!-- <img src="images/common/header_line.jpg"> -->
	                 
	                 <a href="register.html" class="login">&nbsp;&nbsp;&nbsp;免费注册&nbsp;&nbsp;</a>
	             </span>
	             <span id="login-info" style="display: none;">
	                 <a href="information_modification.html" id="headerUsername" class="login"></a>
	                 
	                 <a href="#" id="headerLogout" class="login">|&nbsp;&nbsp;退出</a>
	             </span>
	         </div>
             <ul class="my_action fix">
                 <li>
                     <a href="product_like.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的关注</a>
                 </li>
                 <li>
                     <img src="images/common/mix_car.png">
                     <a href="cart.html">购物车<span id="cartQuantity">[0]</span></a>
                 </li>
                 <li>
                     <a href="index.html">我的商城</a>
                 </li>
             </ul>
        </div>
    </header>
	<!--头部导航结束-->
	
	<!-- 最上方留白处-->
    <div class="white" style="height:28px;">
        <p>Husky</p>
    </div>
    
    
    <div class="action_search_box wrapper_box">
        <a class="logo" href="index.html"></a>
        <div class="inputbox" style="margin-top:10px;">
        	<div>
        		<a class="search_icon " ></a>
            	<input type="text" id="keyword" name="keyword" placeholder="请输入您感兴趣的内容">
           	 	<a id="searchBtn" class="searchbtn" href="javascript:search();">搜&nbsp;索</a>
            </div>
        </div>
        <img class="telephonenumber" src="images/common/telephone_number.jpg" >
    </div>
    
    <!--分割线-->
	<hr style="height: 1px; border: none; border-top: 1px solid #DDD; margin: 25px 0 0px;">
	
	<div>
		<div class="content_box clear_fix">
			<!-- 左部导航栏 -->
			<div class="left_nav l">
		    	<div class="person_info">
		    		<div class="head_img">
		    			<img src="images/common/deimg.png" alt="">
		    		</div>
		    		<div class="welcome_info">
		    			欢迎回来，[<a id="left_username"></a>]
		    		</div>
		    		<div class="level_score">
		    			<div class="clearfix">
		    				<div class="l"></div>
		    				<div class="level_value l"></div>
		    			</div>
		    			<div class="clearfix">
		    				<div class="l" style="margin-left:33px;">积分：</div>
		    				<div id="left_userpoints" class="score_value l">0</div>
		    			</div>
		    		</div>
		    	</div>
		    	<div>
		    		<div class="title">
		    			<div class="dashed">我的交易</div>
		    		</div>
		    		<div class="item"><a href="order_list.html">我的订单</a></div>
		    		<div class="item "><a href="cart.html">我的购物车</a></div>
		    		<!-- <div class="item"><a href="#">我的积分</a></div> -->
		    		<!-- <div class="item"><a href="#">我的积分消费</a></div> -->
		    		<div class="item"><a href="product_like.html">我的关注</a></div>
		    		<!-- <div class="item"><a href="#">我的购买咨询</a></div> -->
		    		<!-- <div class="item"><a href="#">我的优惠券</a></div> -->
		    		<div class="item active"><a href="address_management.html">收货地址管理</a></div>
		    		<!-- <div class="item"><a href="#">我的推荐</a></div> -->
		    	</div>
		    	<div style="margin-top:16px;">
		    		<div class="title">
		    			<div class="dashed">我的账户</div>
		    		</div>
		    		<div class="item"><a href="information_modification.html">个人资料</a></div>
		    		<div class="item"><a href="password_modification.html">修改密码</a></div>
		    	</div>
		    </div>
		    
	
			<!--中部右侧地址管理-->
		    <div>
	            <div class="right_title">收货地址管理</div>
	            <!-- 内容的“个人资料”与表单分割线 -->
	            <hr style="width: 870px;float: right; border: none;border-top: 1px solid #DDD;margin: 5px 0px 0px 0px;">
	            
	            <!--新增地址-->
	            <div class="new_address">
	                <div  style="color:red;margin-top:20px;text-align:center;width:700px;">
	                	<a id="hint" >新增收货地址</a>
	                </div>
	                <div class="management_box">
	                    <div class="management_item"><span style="color:red;">*</span>地址信息:</div>
                		<div data-toggle="distpicker" id="distpicker1">
								<select name="provinceName" id="eprovinceName" class="management_input" style="width: 130px;" data-province="山东省"></select>
								<select name="cityName" id="ecityName" class="management_input" style="width: 130px;" data-city="济南市" ></select>
								<select name="districtName" id="edistrictName" class="management_input" style="width: 130px;" data-district="历城区"></select>
						</div>
	                </div>
	                <div class="management_box">
	                    <div class="management_item"><span style="color:red;">*</span>详细地址:</div>
						<input id="detailAddr" type="text" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息" ></input>
	                </div>
	                <div class="management_box">
	                    <div class="management_item" style="margin-left: 9px;">邮政编码:</div>
	                    <input id="zip" class="management_input" type="text" placeholder="请填写邮编" ></input>
	                </div>
	                <div class="management_box">
	                    <div class="management_item" style="margin-left:-12px;"><span style="color:red;">*</span>收货人姓名:</div>
	                    <input id="consignee" class="management_input" type="text" placeholder="长度不超过20个字符" maxlength="20" ></input>
	                </div>
	                <div class="management_box">
	                    <div class="management_item"><span style="color:red;">*</span>手机号码:</div>
	                    <input id="phone" class="management_input" type="text" placeholder="长度不超过20个字符" maxlength="20" ></input>
	                </div>
	                <input id="btnSave" class="management_btn" type="submit"  value="保存">
	            </div>
	            
	            <!--编辑地址-->
	            <!-- 动态添加地址            -->
	            <div class="" style="float:left;margin-top:25px;margin-left: 50px;">
	                <table id="address_container">
	                    <!-- 显示所有地址信息 -->
	                </table>
	            </div>
	        </div>
			<script id= "address_tpl" type="text/x-handlebars-template">
				<colgroup>
					<col style="width: 146px;">
					<col style="width: 120px;">
					<col style="width: 180px;">
					<col style="width: 80px;">
					<col style="width: 80px;">
					<col style="width: 96px;">
					<col style="width: 90px;">
				</colgroup>
				<thead>
					<tr class="address_table">
							<th  class="next_table_cell">收货人</th>
							<th class="next_table_cell">所在地区</th>
							<th class="next_table_cell">详细地址</th>
							<th class="next_table_cell">邮编</th>
							<th class="next_table_cell">电话/手机</th>
							<th class="next_table_cell">操作</th>
							<th class="next_table_cell"></th>
					</tr>
				<thead>
			{{#each this}}
			<tr style="border: 1px solid #000" class="address_table1">
					<td class="next_table_cell">{{name}}</td>
					<td class="next_table_cell">{{province}}{{city}}{{district}}</td>
					<td class="next_table_cell">{{addr}}</td>
					<td class="next_table_cell">{{zip}}</td>
					<td class="next_table_cell">{{mobile}}</td>
					<td class="next_table_cell"><a href="#" class="addr_update" addr_id={{id}}>修改</a><span>|</span><a href="#" class="addr_del" addr_id={{id}}>删除</a></td>
					<td class="next_table_cell">{{state default_addr id}}</td>
			</tr>
			{{/each}}
			</script>
			<!-- 中间地址管理结束 -->
		</div>
		    
	    <!-- 底部信息 -->
	    <div id="product_service" class="content_box clearfix">
	    	<ul>
	    		<li class="item l">
	    			<p class="item_icon icon1 l"></p>
	    			<div class="item_text l">
	    				<p class="text_tit">真实货源</p>
	    				<p class="text_info">一手货源&nbsp;真实存在</p>
	    			</div>
	    		</li>
	    		<li class="item l">
	    			<p class="item_icon icon2 l"></p>
	    			<div class="item_text l">
	    				<p class="text_tit">品质保障</p>
	    				<p class="text_info">垂直专业&nbsp;优选厂商</p>
	    			</div>
	    		</li>
	    		<li class="item l">
	    			<p class="item_icon icon3 l"></p>
	    			<div class="item_text l">
	    				<p class="text_tit">服务保障</p>
	    				<p class="text_info">专业服务团队</p>
	    			</div>
	    		</li>
	    		<li class="item l">
	    			<p class="item_icon icon4 l"></p>
	    			<div class="item_text l">
	    				<p class="text_tit">交易透明</p>
	    				<p class="text_info">买卖双方面谈价格</p>
	    			</div>
	    		</li>
	    	</ul>
	    </div>
	</div> 
	   
	    <div class="footerbox">
	    	<div class="footer">
	    		<div class="content_box">
	    			<div class="footerinside">
		    			<h1>新手指南</h1>
		    			<a href="#" target="_blank">免费注册</a>
		    			<a href="#" target="_blank">个人资料及密码</a>
		    			<a href="#" target="_blank">商品关注</a>
		    			<a href="#" target="_blank">查询订单</a>
		    			<a href="#" target="_blank">购物流程</a>
	    			</div>
	    			<div class="footerinside">
						<h1>付款/退款</h1>
		    			<a href="#" target="_blank">在线支付</a>
		    			<a href="#" target="_blank">银行转账</a>
		    			<a href="#" target="_blank">发票办理</a>    		
		    		</div>
		    		<div class="footerinside">
		    			<h1>配送方式</h1>
		    			<a href="#" target="_blank">快递配送</a>
		    			<a href="#" target="_blank">零担物流</a>
		    		</div>
		    		<div class="footerinside">
		    			<h1>售后服务</h1>
		    			<a href="#" target="_blank">退货流程</a>
		    			<a href="#" target="_blank">退货政策</a>
		    		</div>
		    		<div class="footerinside">
		    			<h1>帮助中心</h1>
		    			<a href="#" target="_blank">常见热点问题</a>
		    			<a href="#" target="_blank">联系我们</a>
		    			<a href="#" target="_blank">投诉与建议</a>
		    		</div>
		    	</div>
	    	</div>
	    	<div class="copyright_bgcolor">
	        	<div class="copyright">Copyright © 2018 XXX有限公司 版权所有 保留一切权利 鲁ICP备XXXXXXXX号-X</div>
        	</div>
    	</div>
	
</body>
</html>
